<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Regular.js • directive</title>
    <link rel="stylesheet" href="../pager/pager.css">
    <script src="../../dist/regular.js"></script>
    <script src="../pager/pager.js"></script>
  </head>
  <body>
    <div id="app" class='container'></div>
    <!-- Templates -->
    <script id="iteration" type="text/regular">
      {{#list list as i}}
        {{i_index}}: {{i.user}}
        <p> {{i.content}} <a href="#" on-click={{this.remove(i)}}>delete</a></p>

      {{/list}}
      <textarea r-model={{draft}} on-enter={{this.add()}}></textarea>

    </script>




    <script>
    var App = Regular.extend({
      template: '#iteration',
      add: function(){
        var data = this.data;
        data.list.push({content: data.draft, user: 'you'})
        data.draft = '';
      },
      remove: function(item){
        var data = this.data;
        var index = data.list.indexOf(item);
        data.list.splice(index, 1);
      }
    });

    var app = new App({data: {list: []}}).inject("#app");


    </script>
  </body>
</html>
